<template>
  <div class="upCopperCont">
      <div class="formVal headImg">
          <div v-if="!headImg" class="upImg iconfont icon-xiangji2"></div>
          <img v-if="headImg" :src="headImg+ossSrc" />
          <input accept="image/*" ref="file" type="file" @change="onFileChange($event)" />
          <div v-if="headImg" class="upIcon iconfont icon-xiangji2"></div>
      </div>
      <el-dialog
          @opened="onDialogOpened"
          @close="cancelFn"
          :show-close="false"
          width="90%"
          :append-to-body="true"
          title="图片裁剪"
          :visible.sync="dialogVisible">
          <div class="preview-image-wrap">
              <img ref="preview-image" class="preview-image" :src="previewImage" alt="">
          </div>
          <div v-if="upImgLoad" class="imgTipLoad">
            <van-loading size="2rem" type="spinner" color="#000" vertical>上传中,请耐心等待~</van-loading>
          </div>
          <div class="ImgCtrlBtn">
              <div @click="cancelFn" class="canceBtn elBtnItem">取消</div>
              <div  @click="onUpdatePhoto" class="elBtnItem">确定</div>
          </div>
      </el-dialog>
      <toast v-model="showToast" position="middle" width="50%" type="text" :time="1000">{{showText}}</toast>

  </div>
</template>

<script>
  import 'cropperjs/dist/cropper.css'
  import Cropper from 'cropperjs'
  import {Toast } from 'vux'
  export default {
    components: {Toast},
    data() {
      return {
        showText:'',
        showToast:false,
        
        previewImage:'',
        dialogVisible:false,
        imgArr:[
          {img:''}
        ],
        headImg:this.propImg,
        upImgLoad:false,
        imgIndex:this.propIndex
      }
    },
    props: {
      propImg:String,
      propIndex:Number,
    },
    
    methods:{
      cancelFn(){
          this.dialogVisible = false
          this.cropper.destroy();
          this.previewImage= ''
          this.$refs.file.value = ''
      },
      onFileChange(e){
          let file = e.target.files[0]
          let blobData = window.URL.createObjectURL(file)
          this.previewImage = blobData
          this.dialogVisible = true
          // 解决选择相同图片不触发change事件的问题
          this.$refs.file.value = ''
      },
        
      onUpdatePhoto(){
        if(!this.upImgLoad){
          this.cropper.getCroppedCanvas().toBlob(file => {
            let formData = new FormData();// 可以增加表单数据
            formData.append("file",file);
            this.upImgLoad = true
            $.ajax({
              url:this.apis+'/common/Upload/UpImg',
              dataType:"json",
              type:'post',
              processData : false,
              contentType : false,
              data:formData,
              success:(res)=>{
                if(res.code==1){
                  let data = res.data.src
                  if(this.imgIndex||this.imgIndex==0){
                    data = {
                      src:res.data.src,
                      index:this.imgIndex
                    }
                  }
                  this.headImg = res.data.src
                  this.$emit('successCropper',data)
                  this.previewImage =res.data.src
                  this.dialogVisible = false
                  this.cropper.destroy();
                }else{
                  this.showToast = true
                  this.showText = res.msg
                }
                this.upImgLoad = false
              },
              error:(res)=>{
                this.upImgLoad = false
                this.showToast = true
                this.showText = '网络超时'
                
              }
            })
          })
        }
        },
      
        onDialogOpened(){
          let image = this.$refs['preview-image']
          let cropper = new Cropper(image, {
            aspectRatio: 1 / 1,// 裁剪框比列  1/1 长与宽的比列  NaN:任意比列
            viewMode: 1,// 0:对裁剪框的移动没有限制  1:裁剪框不能超过图片//2:裁剪框不能超过图片且图片高度和阴影背景高度一样  3:让图片完全填充阴影背景
            dragMode: 'none',
            zoomOnTouch : true,//是否可以通过触摸的形式来去放大图片(手机端)
            zoomable : true,//是否允许缩放图片
            autoCropArea:0.8,//当初始化时，裁剪框的大小与原图的比例
            background: true,//是否显示网格背景
            center : true,//裁剪框是否在图片的中心
            cropBoxResizable: true,//是否可以调节裁剪框的大小
          })
          this.cropper = cropper
        },
    },
    mounted(){
      
    },
    created() {
    },
  }
</script>

<style scoped lang="less">
.headImg{
      width: 5rem;
      height: 5rem;
      border-radius: 0.25rem;
      background-color: #f7f8fa;
      position: relative;
      margin-bottom: 1rem;
      .upIcon{
          position: absolute;
          bottom: 0;
          right: 0;
          font-size: 0.9rem;
          color: #fff;
          width: 1.5rem;
          height: 1.5rem;
          background-color: black;
          text-align: center;
          line-height: 1.5rem;
          border-radius: 0.75rem 0 0 0;
      }
      input{
          width: 100%;
          height: 100%;
          opacity: 0;
          position: absolute;
          top: 0;
          left: 0;
      }
      .upImg{
          width: 100%;
          height: 100%;
          text-align: center;
          line-height: 5rem;
          font-size: 2rem;
          // color: #dcdee0;
          color: #ccc;
      }
      img{
          width: 100%;
      }
  }
  
</style>
  <style scoped lang="less">
  .preview-image-wrap{
      width: 100%;
      background-color: #fff;
      height: 15.5rem;
      .preview-image {
          display: block;
          max-width: 100%;
          // height: 15rem;
      }
  }
  .el-dialog__body{
      padding: 0.5rem 1rem;
  }
  .imgTipLoad{
    margin: 0.75rem 0;
  }
  .ImgCtrlBtn{
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin-top: 0.75rem;
      .elBtnItem{
          width: 48%;
          background-color: #556dea;
          padding: 0.6rem 0;
          border-radius: 0.25rem;
          text-align: center;
          color: white;
      }
      .canceBtn{
          background-color: #ccc;
          color: white;
      }
  }
</style>
